<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
  <Row>
    <Form :label-width="150" inline>
      <div class='main_item'>
        <div @click="dataShow('custBaseData')" class="main_item_title">
          <span style="font-weight:bold;" icon="md-arrow-dropdown">客户基本信息</span>
          <span style="float:right">
            <Icon type="md-arrow-dropdown" id="actionData_icon"></Icon>
          </span>
        </div>
        <div id="custBaseData" class="main_item_content_block">
          <div style="margin:10px 10px 0px 10px;">
            <FormItem label="姓名" :label-width="80">
              <Input v-model="overdueCollection.custName" placeholder="" readonly>
              </Input>
            </FormItem>
            <FormItem label="性别" :label-width="80">
              <Input v-model="overdueCollection.sex" readonly></Input>
            </FormItem>
            <FormItem label="出生年月" :label-width="80">
              <Input :value="this.$util.loanModularFormatTime(overdueCollection.custBirthDate)" readonly></Input>
            </FormItem>
            <FormItem label="证件号码" :label-width="80">
              <Input v-model="overdueCollection.custCardNo" readonly></Input>
            </FormItem>
            <FormItem label="手机号" :label-width="80">
              <Input v-model="overdueCollection.mobile" readonly></Input>
            </FormItem>
            <FormItem label="单位" :label-width="80">
              <Input v-model="overdueCollection.companyName" readonly>
              </Input>
            </FormItem>
          </div>
        </div>
      </div>

      <div class='main_item'>
        <div @click="dataShow('rzhtBaseData')" class="main_item_title">
          <span style="font-weight:bold;" icon="md-arrow-dropdown">融资合同基本信息</span>
          <span style="float:right">
            <Icon type="md-arrow-dropdown" id="actionData_icon"></Icon>
          </span>
        </div>
        <div id="rzhtBaseData" class="main_item_content_block">
          <div style="margin:30px 10px 30px 10px;">
            <Table border :columns="collectBaseInfoForm" :data="collectBaseInfoData" style="width: 100%;"></Table>
          </div>
        </div>
      </div>

      <div class='main_item'>
        <div @click="dataShow('yqBaseData')" class="main_item_title">
          <span style="font-weight:bold;" icon="md-arrow-dropdown">逾期基本信息</span>
          <span style="float:right">
            <Icon type="md-arrow-dropdown" id="actionData_icon"></Icon>
          </span>
        </div>
        <div id="yqBaseData" class="main_item_content_block">
          <div style="margin:30px 10px 30px 10px;">
            <FormItem label="当前逾期天数">
              <Input readonly v-model="collectBaseInfo.overdueCurrentTotalDay" placeholder="">
              </Input>
            </FormItem>
            <FormItem label="历史最大逾期天数">
              <Input readonly v-model="collectBaseInfo.overdueCurrentTotalDay" placeholder="">
              </Input>
            </FormItem>
            <FormItem label="当前应还款总金额">
              <Input readonly v-model="collectBaseInfo.overdueCurrentTotalAmt" placeholder="">
              </Input>
            </FormItem>
            <FormItem label="当前应还本金总金额">
              <Input readonly v-model="collectBaseInfo.principalOs" placeholder="">
              </Input>
            </FormItem>
            <FormItem label="当前应还利息总金额">
              <Input readonly v-model="collectBaseInfo.interestOs" placeholder="">
              </Input>
            </FormItem>

            <FormItem label="当前应还管理费总金额">
              <Input readonly v-model="collectBaseInfo.managementFeeOs" placeholder="">
              </Input>
            </FormItem>
            <FormItem label="当前应还罚费总金额">
              <Input readonly v-model="collectBaseInfo.penaltyFeeOs" placeholder="">
              </Input>
            </FormItem>

            <FormItem label="首期逾期期数">
              <Input readonly v-model="collectBaseInfo.overdueFirstInputTerm" placeholder="">
              </Input>
            </FormItem>
            <FormItem label="当前逾期期数">
              <Input readonly v-model="collectBaseInfo.overdueCurrentInputTerm" placeholder="">
              </Input>
            </FormItem>
            <FormItem label="逾期类型">
              <Input readonly v-model="collectBaseInfo.assignOverdueTypeCode" placeholder="">
              </Input>
            </FormItem>
            <FormItem label="任务所属催收员">
              <Input readonly v-model="collectBaseInfo.collectorName" placeholder="">
              </Input>
            </FormItem>
          </div>
        </div>
      </div>

      <div class='main_item'>
        <div @click="dataShow('csbuzdData')" id="moxx" class="main_item_title">
          <span style="font-weight:bold;" icon="md-arrow-dropdown">催收备注字段</span>
          <span style="float:right">
            <Icon type="md-arrow-dropdown" id="actionData_icon"></Icon>
          </span>
        </div>
        <div id="csbuzdData" class="main_item_content_block">
          <div style="margin:3px 10px 3px 10px;">
            <Table border :columns="custBaseInfoRecordColumns" :data="custBaseInfoRecordData" style="width: 100%;"></Table>
          </div>
        </div>
      </div>
      <br>
      <div class='main_item'>
        <div @click="dataShow('actionData')" id="moxx" class="main_item_title">
          <span style="font-weight:bold;" icon="md-arrow-dropdown">行动</span>
          <span style="float:right">
            <Icon type="md-arrow-dropdown" id="actionData_icon"></Icon>
          </span>
        </div>
        <div id="actionData" class="main_item_content_block">
          <div style="margin:3px 10px 3px 10px;">
            <Table border :columns="actionColumns" :data="actionData" style="width: 100%;"></Table>
          </div>
        </div>
      </div>
    </Form>
    <!-- <TabPane label="催收操作" name="collectionOperation"> -->
    <Form :label-width="150" inline>
      <collection-operation :collectTaskParams='collectTaskParams'></collection-operation>
      <!-- </TabPane> -->
    </Form>
  </Row>
</template>

<script>
import collectionOperation from './collection-operation.vue'
export default {
  components: {
    collectionOperation
  },
  name: 'collect-base-info',
  data () {
    return {
      comptParams: {
        loanId: '',
        overdueCode: ''
      },
      collectBaseInfo: {
        loanId: '',
        overdueType: '',
        overdueCurrentTotalDay: '',
        overdueHistoryTotalDay: '',
        overdueCurrentTotalAmt: '',
        principalOs: '',
        interestOs: '',
        managementFeeOs: '',
        penaltyFeeOs: '',
        overdueFirstInputTerm: '',
        overdueCurrentInputTerm: '',
        assignOverdueTypeCode: '',
        collectorName: ''

      },
      overdueCollection: {
        custName: null,
        sex: null,
        custBirthDate: null,
        custCardNo: null,
        mobile: null,
        companyName: null

      },
      collectBaseInfoForm: [
        {
          title: '贷款编号',
          key: 'loanId',
          align: 'center'
        },
        {
          title: '贷款产品',
          key: 'productName',
          align: 'center'
        },
        {
          title: '贷款金额',
          key: 'loanAmount',
          align: 'center'
        },
        {
          title: '期数',
          key: 'terms',
          align: 'center'
        }
      ],
      collectBaseInfoData: [],
      custBaseInfoRecordColumns: [
        {
          title: '类型',
          key: 'actionTypeId',
          align: 'center'
        },
        {
          title: '修改时间',
          key: 'updatedDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.updatedDate))
            ])
          }
        },
        {
          title: '操作员',
          key: 'updatedBy',
          align: 'center'
        },
        {
          title: '详细信息',
          key: 'remarks',
          align: 'center'
        }
      ],
      custBaseInfoRecordData: [],
      actionColumns: [
        {
          title: '创建时间',
          key: 'createdDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.createdDate))
            ])
          }
        },
        {
          title: '联系人',
          key: 'contactPerson',
          align: 'center'
        },
        {
          title: '联系方式',
          key: 'contactType',
          align: 'center'
        },
        {
          title: '名称',
          key: 'actionName',
          align: 'center'
        },
        {
          title: '承诺金额',
          key: 'promiseAmount',
          align: 'center'
        },
        {
          title: '承诺日期',
          key: 'promiseDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.promiseDate))
            ])
          }
        },
        {
          title: '约会日期时间',
          key: 'meetDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.meetDate))
            ])
          }
        },
        {
          title: '行动用户',
          key: 'actionUser',
          align: 'center'
        },
        {
          title: '行动结果',
          key: 'actionStatusDescp',
          align: 'center'
        }
      ],
      actionData: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.loadBasicInfo()
  },
  methods: {
    // 点击tab事件
    dataShow: function (tagId) {
      var clickTag = document.getElementById(tagId)
      if (clickTag.className === 'main_item_content') {
        clickTag.className = 'main_item_content_block'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropup'
      } else {
        clickTag.className = 'main_item_content'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropdown'
      }
    },
    loadBasicInfo () {
      var vm = this
      var params = {}
      params.custCardNo = this.$route.query.custCardNo
      params.overdueCaseId = this.collectTaskParams.overdueCaseId
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/selectBasicInfo', params).then(re => {
        var data = re.data
        var message = data.message
        var code = data.code
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.overdueCollection = data.data || {}
        var date = data.data
        if (date.overdueList != null) {
          vm.collectBaseInfoData = date.overdueList || []
        }
        if (date.voerduc != null) {
          vm.collectBaseInfo = date.voerduc || []
        }
        if (date.collecteList != null) {
          vm.custBaseInfoRecordData = date.collecteList || []
          vm.actionData = date.collecteList || []
        }
      }).catch(er => {

      })
    }
  },
  props: {
    collectTaskParams: Object
  }
}
</script>
